<template>
    <div :id="id">
        <div v-for="(item,index) in source" @click.stop="clickRow(item)" class="relative table-content" :key="index" :class="index % 2 == 0 ? 'bg-fff' : 'bg-FAFAFA'">

            <a-row class="ml-30 h48 flex-ac drag-icon-content" >
                <a-col :span="col.spanWidth ||  avgSpan" v-for="(col,i) in columns" >
                    <div v-if="i == 0" class="ellipsis " :style="{paddingLeft:(level * 24) + 'px'}">

                        <div class="drag-icon c-7f7f7f pointer" v-if="source.length > 1">
                            <a-icon type="bars"/>
                        </div>

                        <!--    首列固定是展开与拖拽列-->

                        <span class="inline-block" style="width: 20px">
                            <span class="up-close-btn pointer " v-if="item[childArrKey] && item[childArrKey].length" @click.stop="changeChildren(item.id)">
                                <a-icon v-if="upfoldArr.includes(item.id)" type="up" style="font-size:11px;color:#fff;font-weight: bold"/>
                                <a-icon v-else type="down" style="font-size:11px;color:#fff;font-weight: bold"/>

                            </span>
                        </span>


                        <a-tooltip placement="topLeft">
                            <template slot="title">
                                <span>   {{ item[col.value] || '--' }}</span>
                            </template>
                            <span class=" ml-8 fs-14 c-1A1A1C fw-400 ">{{ item[col.value] }}</span>
                        </a-tooltip>
                    </div>
                    <slot
                        v-else-if="col.slotName"
                        :name="col.slotName"
                        :index="index"
                        :item="item"
                    ></slot>
                    <div v-else class="ellipsis pl-15">
                        <a-tooltip placement="topLeft">
                            <template slot="title">
                                <span>   {{ item[col.value] || '--' }}</span>
                            </template>
                                {{ item[col.value] || '--' }}
                        </a-tooltip>
                    </div>
                </a-col>
            </a-row>

            <transition name="upfold">
                <div class="overflow-hidden" v-show="upfoldArr.includes(item.id)">
                    <table-row :childArrKey="childArrKey" @clickRow="clickRow"  v-if="item[childArrKey] && item[childArrKey].length" :unfold="unfold" :source="item[childArrKey]" :level="level+1" :columns="columns">
                            <span
                                v-for="(col,i) in columns"
                                v-if="col.slotName && i != 0"
                                :slot="col.slotName"
                                slot-scope="{index,item}">
                                <slot :name="col.slotName" :index="index" :item="item"></slot>
                            </span>
                    </table-row>
                </div>
            </transition>
        </div>

    </div>
</template>

<script>
import tableRow from "./table-row.vue"
import global from "@/assets/js/global";
import Sortable from "sortablejs";

export default {
    name: "table-row",
    props: {
        source: {
            type: Array,
            default() {
                return []
            },
        },
        columns: {
            // 每列展示的数据
            type: Array,
            defalut() {
                return []
            },
        },
        level: {
            // 表示当前的层级,用于层级不同,首列的缩进不同
            type: Number,
            defalut() {
                return 1;
            }
        },
        unfold: {
            // 默认展开的节点ID数组
            type: Array,
            default() {
                return []
            },
        },
        childArrKey:{
            // 子级数组的key值,
            type:String,
            default:'subRooms'
        },
    },

    data() {
        return {
            upfoldArr: [],
            id: global.getRandomId(),
            avgSpan: "",
        }
    },
    beforeMount() {
        this.avgSpan = 24 / this.columns.length

        this.upfoldArr = JSON.parse(JSON.stringify(this.unfold))
    },
    mounted() {
        this.$nextTick(() => {
            this.initDrag();
        })

    },
    methods: {
        changeChildren(id) {
            let index = this.upfoldArr.indexOf(id)

            if (index == -1) {
                this.upfoldArr.push(id)
            } else {
                this.upfoldArr.splice(index, 1)
            }
        },
        initDrag() {
            new Sortable(document.getElementById(this.id), {
                draggable: ".table-content",  // 允许拖拽的项目类名
                handle: ".drag-icon",
                ghostClass: "drag-table-item",
                onEnd: ({newDraggableIndex, oldDraggableIndex}) => {
                    // 此处拷贝再进行赋值,是因为数据没错,但是界面展示顺序有错,暂时没有找到原因
                    let arr = JSON.parse(JSON.stringify(this.source))
                    const currRow = arr.splice(oldDraggableIndex, 1)[0]
                    arr.splice(newDraggableIndex, 0, currRow)
                    // 数组交互位置
                    this.source = []
                    this.$nextTick(()=>{
                        this.source = arr;
                    })
                    this.$bus.$emit('arrOrderChange', arr)
                },
            })
        },
        clickRow(item){
            this.$emit('clickRow',item)
        },
    },
    components: {
        tableRow
    }
}
</script>

<style scoped lang="less">
.up-close-btn {
    width: 20px;
    height: 20px;
    display: inline-block;
    text-align: center;
    line-height: 18px;
    background: #FF7011;
    border-radius: 4px;

}

.h48 {
    height: 48px;
}

.flex-ac {
    display: flex !important;

}

.overflow-hidden {
    overflow: hidden;
}

.drag-icon {
    position: absolute;
    left: 5px;
    //top:20px;
    z-index: 2;
    display: none;
}

.drag-icon-content:hover {
    .drag-icon {
        display: block;
    }
}

</style>